<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./css/login.css">
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <style>
        .ppp{
            width:200px;
            height:45px;
            display: inline-block;
            margin-top:22px;
            margin-left: 110px;
            position: absolute;
            left:210px;
            cursor: pointer;
        }
        .code{
            width: 100px;
        }
        .yan {
            width: 25%;
            height: 26px;
            font-size: 1.6rem;
            background-color: transparent;
            border-bottom: 1px solid black;
            margin-top: 40px;
            padding-left: 10px;
            margin-left: -55px;
        }
    </style>
</head>
<body>
<div id="app">
<div class="box">
    <div class="top">登&nbsp;&nbsp;&nbsp;&nbsp;录</div>
    <div class="bottom">
        <input type="text" placeholder="用户名" v-model="user.uname"><br>
        <span v-html="error.uname"></span><br>
        <input type="password" placeholder="密码" v-model="user.pwd"><br>
        <input type="text" name="yan" class="yan" v-model="user.code">
        <div class="ppp" :style="{ backgroundImage: 'url(' + imageUrl + ')' }" @click="changeCode"></div>
        <span v-html="error.pwd"></span><br>
        <button @click="login">登录</button>
        <button><a href="reg.html">注册</a></button>
        <button @click="myinfo">我的信息</button>
    </div>
</div>
</div>
<script>
    let app=new Vue({
        el:"#app",
        data:{
            user:{uname:'',pwd:'',code:''},
            error:{uname:'',pwd:'',code:''},
            imageUrl:'',
        },
        methods:{
            login(){
                axios.post("blog-user/userinfo/login",this.user).then(res=>{
                    this.error={uname:'',pwd:''};
                    if(res.data.code==1){
                        sessionStorage.setItem("jwt",res.headers.authorization)
                        this.$message(res.data.message);
                        if(res.data.data.status==0){
                            location.href="index.html"
                        }else if(res.data.data.status==1){
                            location.href="admin/index.html"
                        }
                    }else if(res.data.code==0){
                        this.$message.error(res.data.message);
                        this.user={uname:'',pwd:''};
                    }else if (res.data.code==-1){
                        this.$message.error(res.data.message)
                        this.getCode();
                        this.error[res.data.data]=res.data.message;
                    }else if(res.data.code==-2){
                        this.$message.error(res.data.message)
                        this.getCode();
                    }

                })
            },
            myinfo(){
                var jwt=sessionStorage.getItem("jwt");
                console.log(jwt);
                axios.get("http://127.0.0.1/blog-user/userinfo/myinfo",{
                    headers:{
                        Authorization: jwt,
                    }
                }).then(res=>{
                    console.log(res.data);
                })
            },
            getCode(){
                axios.get("user/code").then(res=>{
                    this.imageUrl=(res.data.data)
                })
            },
            changeCode(){
                this.getCode();
            }
        },
        created() {


        },
        mounted() {
            this.getCode();
        }
    })
</script>
</body>
</html>